<template>
  <div>
    <!-- 漏斗图 -->
    <div
      id="funnelChart"
      style="width:100%;height:100%;"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "Funnel",
          show: false
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%"
        },
        legend: {
          data: ["Show", "Click", "Visit", "Inquiry", "Order"],
          textStyle: {
            color: "#9FE6B8",
            fontSize: 14
          },
          x: "right",
          y: "center",
          orient: "vertical",
        },
        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "6%",
            top: 20,
            bottom: 20,
            width: "75%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside"
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 60, name: "Visit" },
              { value: 40, name: "Inquiry" },
              { value: 20, name: "Order" },
              { value: 80, name: "Click" },
              { value: 100, name: "Show" }
            ]
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      var myCharts = this.$echarts.init(document.getElementById("funnelChart"));
      myCharts.setOption(this.option);
      window.addEventListener("resize",myCharts.resize)
    }
  }
};
</script>

<style scoped>
</style>
